html,body,ul,li{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
}
*{
    box-sizing: border-box;
}
body{
    font: 14px/1.5 'MicrosoftYaHei';
    color: #000;
    background-color: #f3f3f3;
}



/* 大于1400px时，样式写在这里 */
$breakpoints:(xlg:1400px,lg:1200px,md:992px,sm:768px);


@for $i from 1 to 13{
    .col-xxlg-#{$i} {
        width: 100%/12*$i;
    }
}
.xxlg-hide {
    display: none;
 }
.xxlg-flex {
   display: flex;
}

@each $key,$val in $breakpoints{
    @media screen and (max-width:$val){
        @for $i from 1 to 13{
            .col-#{$key}-#{$i} {
                width: 100%/12*$i;
            }
        }
        .#{$key}-hide {
           display: none;
        }

        .#{$key}-flex {
            display: flex;
        }
    } 
}

@media screen and (max-width:576px){
    @for $i from 1 to 13{
        .col-#{$i} {
            width: 100%/12*$i;
        }
    }
} 
